<template>
  <div class="cus-menu-container">
    <el-menu
      :default-active="active"
      @select="selectedMenu"
      @open="openMenu"
      @close="openMenu"
      :unique-opened="true"
    >
      <cus-menu v-for="(item, index) in list" :key="index" :item="item" />
    </el-menu>
  </div>
</template>

<script>
import cusMenu from './cus-menu'
import { getUniqueFromTree } from '@/utils'
export default {
  name: 'cusAside',
  provide() {
    return {
      injectReport: this.injectReport, // 可设置为父组件props的方法
      injectClick: this.injectClick, // 可设置为父组件props的方法
    }
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      },
    },
    active: {
      type: String,
      default: '',
    },
  },
  components: {
    'cus-menu': cusMenu,
  },
  data() {
    return {}
  },
  methods: {
    // 所展开的menu
    openMenu(id) {
      const currentMenu = getUniqueFromTree(this.list, 'pkid', id)
      this.$emit('open-menu', currentMenu)
    },
    // 所选menu
    selectedMenu(id) {
      const currentMenu = getUniqueFromTree(this.list, 'pkid', id)
      this.$emit('select-menu', currentMenu)
    },

    // 子孙组件inject方法
    injectReport(item) {
      this.$emit('report', item)
    },

    injectClick(item) {
      console.log(item)
    },
  },
}
</script>

<style lang="scss">
.cus-menu-container {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
